
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  //控制台WARING警告，需要配置打包模式,默认设置是production模式
  //development模式  开发模式，代码不会被压缩混淆，注释都在
  //"mode": "development",
  //production模式 生产模式，是要上线的，代码会被进行压缩，混淆，多余的注释都会被去掉，确保体积小，加载速度快 
  //"mode": "production",

  plugins: [new HtmlWebpackPlugin({
    //这里设置html的模板，告知以public/index.html这个页面 去创建html文件，打包到dist/index.html中
    template: "./public/index.html"
  })],

  //webpack默认只能识别js和json文件，其他类型文件不能识别
  //可以借助loader加载器识别其他文件
  module: {
    rules: [
      //处理css文件
      {
        test: /\.css$/i,//匹配以 .css 结尾的文件名，i不区分大小写
        use: ["style-loader", "css-loader"],//执行顺序：右 → 左
      },
      //处理 less文件
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
      //处理图片
      {
        //test.匹配到以下后缀名结尾的文件，当成静态资源打包处理
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset',//asset在导出一个 data URI 和发送一个单独的文件之间自动选择
        //asset模式 会以 8KB 大小区分图片文件
        //小于8KB的，会把图片文件传给base64,打包进js中
        //大于8KB的，直接将图片文件输出到dist文件下
        //如果不区分大小，图片都转成base64格式，那么大图在转换后的体积还会变大，
      },
    ],
  },
};